<template>
  <Sider v-model:collapsed="collapsed" :collapsible="false">
    <div class="w-100% flex flex-row justify-center items-center pt-5 pb-5 layout-header">
      <img class="w-15%" src="@/assets/imgs/logo-color.png" />
      <span class="text-white text-lg ml-2 font-semibold">Develop Design</span>
    </div>
    <LayoutMenu></LayoutMenu>
  </Sider>
</template>

<script name="DefaultLayout" lang="ts" setup>
import { ref } from "vue";
import { LayoutSider as Sider } from "ant-design-vue";
import LayoutMenu from "@/layouts/components/menu/index.vue";
const collapsed = ref(false);
</script>

<style lang="scss" scoped>
.layout-header {
	height: $layout-header-height;
}
</style>